import { Component } from '@angular/core';
import { ApesField } from './apes-field';
import { ApiService } from '@core/services/http/api.service';
import { Events } from '@core/services/events/Events';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { SubjectService } from '@core/services/events/subject.service';
import { TransferItem } from '@shared/apes/transfer';
import { getO } from '../../../../utils/utils';

@Component({
  selector: 'formly-field-transfer',
  template: `
    <div>
      <apes-transfer
        [apesDataSource]="list"
        [apesDisabled]="to.disabled"
        [apesListStyle]="listStyle"
        [apesTitles]="titles"
        (apesSelectChange)="listSelect($event)"
        (apesChange)="listChange($event)"
        [apesShowSelectAll]="false"
        [apesRenderList]="[renderList, renderList]">
        <ng-template
          #renderList
          let-items
          let-direction="direction"
          let-stat="stat"
          let-disabled="disabled"
          let-onItemSelectAll="onItemSelectAll"
          let-onItemSelect="onItemSelect">
          <apes-table #t [apesData]="convertItems(items)"
                      apesBordered
                      apesSize="small">
            <thead>
            <tr>
              <th
                apesShowCheckbox
                [apesDisabled]="disabled"
                [apesChecked]="stat.checkAll"
                [apesIndeterminate]="stat.checkHalf"
                (apesCheckedChange)="onItemSelectAll($event)"
              ></th>
              <th>Name</th>
              <th *ngIf="direction === 'left'">Tag</th>
              <th>Description</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of t.data" (click)="onItemSelect(data)">
              <td
                apesShowCheckbox
                [apesChecked]="data.checked"
                [apesDisabled]="disabled || data.disabled"
                (apesCheckedChange)="onItemSelect(data)"
              ></td>
              <td>{{ data.title }}</td>
              <td *ngIf="direction === 'left'">
                <apes-tag>{{ data.tag }}</apes-tag>
              </td>
              <td>{{ data.description }}</td>
            </tr>
            </tbody>
          </apes-table>
        </ng-template>
      </apes-transfer>
<!--      <div style="margin-top: 8px;">-->
<!--        <apes-switch [(ngModel)]="disabled" apesCheckedChildren="disabled"-->
<!--                     apesUnCheckedChildren="disabled"></apes-switch>-->
<!--        <div></div>-->
<!--      </div>-->
    </div>
  `,
})

export class FormlyFieldTransfer extends ApesField {

  list: TransferItem[] = [];
  disabled = false;
  listStyle: any;
  titles: any[] = ['左侧', '右侧'];

  isTable: boolean = false;

  constructor(protected apiService: ApiService, protected events: Events, protected expressionService: ExpressionService, protected subject: SubjectService) {
    super(apiService, events, expressionService, subject);
  }

  ngOnInit(): void {
    this.listStyle = this.to['listStyle'] ? getO(this.to['listStyle']) : { 'width': 180 };
    // this.list = this.formControl.value;
    let config = getO(this.to['config']);
    if (config['titles']) {
      this.titles = config['titles'];
    }
    if(this.to['tableData']){
      this.isTable = true;
    }


    for (let i = 0; i < 20; i++) {
      this.list.push({
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        disabled: i % 4 === 0,
        tag: ['cat', 'dog', 'bird'][i % 3]
      });
    }

    [2, 3].forEach(idx => (this.list[idx].direction = 'right'));
  }

  listSelect(ret: {}): void {
    console.log('apesSelectChange', ret);
  }

  listChange(ret: {}): void {
    console.log('apesChange', ret);
  }

  convertItems(items: TransferItem[]): TransferItem[] {
    return items.filter(i => !i.hide);
  }

}
